<template>
	<view v-show="!item.hidden" :class="className">
		<text v-text="`${item.sortNum + 1}.${item.label}`" :class="item.required ? 'inputRequired' : ''" v-if="item.label && item.sortNum"></text>
		<text v-text="item.label" :class="item.required ? 'inputRequired' : ''" v-else="item.label"></text>
		<input
			class="uni-input"
			placeholder-class="input-placeholder"
			:value="item.value"
			:placeholder="`请填写${item.label}`"
			:disabled="item.disabled"
			:name="item.name"
			type="getType(item)"
			@input="change"
		/>
	</view>
</template>

<script>
	import {mapActions} from 'vuex'
export default {
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		...mapActions([
			'setClassName'
		]),
		change(e) {
			this.item.value = e.detail.value;
			this.$emit('inputChange', this.item);
		},
		//获取input类型
		getType(item) {
			let type = item.inputType ? item.inputType : 'text';
			return type;
		}
	},
	computed: {
		className() {
			return this.$store.getters.className;
		}
	},
	components: {},
	props: {
		item: {
			type: Object,
			required: true
		}
	},
	onUnload() {
		this.setClassName('')
	}
};
</script>

<style lang="scss" scoped>
view {
	border-bottom: 1upx solid #eee;
	margin: 0 50upx;
	// height: 100upx;
	text {
		display: block;
		text-align: left;
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin-top: 20upx;
		// padding: 0 10upx;
		color: #3c68e5;
	}
	input {
		line-height: 80upx;
		height: 80upx;
		padding: 0 10upx;
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
}

.input-placeholder {
	font-size: 32upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: rgba(204, 204, 204, 1);
	// color:#333;
	line-height: 80upx;
}
.blue {
	text {
		color: #007AFF !important;
		font-size: 34upx;
	}
}
</style>
